<template>
    <div id="manager">
        <div id="top">
        </div>
        <div id="content">
            <div class="palette">
                <el-tree
                        :data="data"
                        :props="defaultProps"
                        @node-click="jump">
                </el-tree>
            </div>
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    import router from './common/router.js';
    export default {
        name: 'manager',
        data () {
            return {
                data: [
                    {
                        label: '美景',
                        children: [
                            {
                                label: '鼓浪屿',
                                url : '/Gulangyu'
                            },
                            {
                                label: '厦门大学',
                                url:'/XiamenUniversity'

                            },
                            {
                                label: '曾厝垵',
                                url:'/Zengcuohuo'
                            }
                        ]
                    },
                    {
                        label: '美食',
                        url:'/Food'
                    },
                    {
                        label: '文化',
                        url:'/culture'
                    },
                    {
                        label: '公交线路',
                        url:'/busRoutes'
                    },
                    {
                        label: '联系我们',
                        url:'/contactUs'
                    }
                ],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            };
        },
        methods : {
            jump(data) {
                router.push(data.url);
            }
        }
    }

</script>

<style>
    body{
        margin: 0;
        padding: 0;
    }
    #top{
        width: 1200px;
        height: 300px;
        margin: 0 auto;
        padding: 0;
        background-image: url("assets/top_bgcolor.jpg");
    }

    #content{
        margin: 0 auto;
        width: 1200px;
        height: 1000px;
    }
    #content .palette{
        padding: 0;
        margin: 0;
        width: 200px;
        height: auto;
        float: left;
    }
    #content .jump{
        margin: 0;
        width: 1000px;
        height: 1000px;
        padding: 0;
        float: left;
    }

    #content .jump .demoPages{
        width: 500px;
        height: 550px;
        margin: 10px auto;
    }
</style>